<template>
  <button :disabled="isLoding" @click="$emit('click')">
    <img class="loading" v-show="isLoding" src="../assets/loding.png" alt="" />
    <slot></slot>
  </button>
</template>
<script>
export default {
  props: {
    isLoding: {
      type: Boolean,
      default: false,
    },
  },
};
</script>
<style lang="scss" scoped>
.loading {
  width: 16px;
  margin-right: 5px;
  animation: identifier 0.5s linear infinite;
}
@keyframes identifier {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
button {
  min-width: 50px;
  display: inline-flex;
  align-content: center;
  padding: 3px 10px;
  margin-right: 10px;
}
</style>